// webpack-dev-server 不配置会打包到磁盘，配置后会打包的内存里面（不在根据output路径存放）,index.html中引用js路径也要做相应修改 <script src="/main.js"></script>
//html-webpack-plugin 插件将src根目录的index.html的内容复制一份到根目录到内存中，并且在html的底部自动插入打包的mian.js文件，访问的时候不在需要http://127.0.0.1:8888/src/
//js 高级用法loader  npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
//自动清理打包的dist 目录 npm i clean-webpack-plugin@3.0.0 -D
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    title: 'Development',
    template: './src/index.html',//指定源文件的存放路径
    filename: './index.html'//指定生成文件的存放路径
})
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

module.exports = {
    mode: 'development',  // package.json 配置打包参数 "build": "webpack --mode production"  会覆盖此处的配置
    entry: path.join(__dirname, './src/index.js'),  //默认入口js文件，不配置也行
    output: {
        path: path.join(__dirname, './dist'), //默认输出的打包路径
        filename: 'js/main.js'// bundle.js //main.js默认打包输出的js文件名，js/main.js=》 打包时将js 文件都保存到js目录下
    },
    devtool: 'eval-cheap-module-source-map', //source map 相关配置 
    plugins: [htmlPlugin, cleanPlugin],
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8888
    },
    module: { //所有第三方模块的匹配规则
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader',] },  //loader顺序是固定的,多个loader时，调用顺序是从后往前
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // { test: /\.jpg|png|gif|webp$/, use: ['url-loader?limit=58919'] }, //只有小于等于limit的大小(字节)的图片打包时才会转换成base64
            {
                test: /\.jpg|png|gif|webp$/, //注意没有引号
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: '58919',
                        outputPath: 'image'  //打包时将图片都放到image文件夹下
                    }
                }

            },
            {
                test: /\.js$/, //注意没有引号
                // exclude: '/node_modules', //排除项
                include: path.resolve(__dirname, 'src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }

            }
        ]
    },
    optimization: {
        // runtimeChunk: true,
    },

}